<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>模板语法</title>
</head>
<body>
  <!-- 
      vue模板语法两大类
      1.插值语法：用于解析标签体内容  
      写法: {{ xx }}
      2.指令语法：用于解析标签 标签属性,内容,事件


   -->
   
  <div id = 'root'>
    <!-- 插值语法{{name}} 绑定data中的值 -->
   <h1> hello, {{ name }}</h1>
   <!-- 标签语法 v-bind:attribute 或:attribute 绑定标签值 -->
    <a :href="baidUrl">百度链接</a>
  </div>
  
  <script type="text/javascript" src="../js/vue.js"></script>
<script>
  // 设置为 false 以阻止 vue 在启动时生成生产提示。
  Vue.config.productionTip = false
  // 创建一个vue实例
  new Vue({
    // el -> element 用于指定当前vue对象绑定哪个容器,值通常为css选择器字符串
    el: '#root',
    // data 用于存储数组,数据供el所指定的容器去使用 
    data: {
      name: '海绵宝宝',
      baidUrl: 'http://www.baidu.com'
    }
  });
</script>
</body>
</html>